<template>
    <div class="videoDetail">
        <HeaderBar :isFixHeaderBar="true"></HeaderBar>
        <div class="video-container">
            <div class="left-container" ref="leftPart" :style="`width: ${playerSize.width}px;`">
                <!-- 标题 -->
                <div class="video-info-container">
                    <h1 :title="video.title" class="video-title">{{ video.title }}</h1>
                    <div class="video-info-detail">
                        <div class="video-info-detail-list">
                            <!-- 排名暂时没做，到时可能还得在数据库加一个属性 -->
                            <a href="/popular/rank/all" target="_blank" class="honor item honor-rank" v-if="video.top">
                                <i class="iconfont icon-paihang"></i>
                                <span class="honor-text">全站排行榜最高第1名</span>
                                <i class="iconfont icon-youjiantou"></i>
                            </a>
                            <span class="view item">
                                <i class="iconfont icon-bofangshu"></i>
                                &nbsp;{{ handleNum(view) }}&nbsp;
                            </span>
                            <span class="danmu item">
                                <i class="iconfont icon-danmushu"></i>
                                &nbsp;{{ handleNum(userStore.danmuList.length) }}&nbsp;
                            </span>
                            <span class="date item">
                                {{ video.uploadDate }}
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 播放器组件 -->
                <PlayerWrap :videoUrl="video.videoUrl" :title="video.title" :duration="video.duration" :user="user"
                    :population="population" v-model:jumpTimePoint="jumpTimePoint" v-model:autonext="autonext"
                    @resize="updatePlayerSize" @sendDm="sendDanmu" @next="next"></PlayerWrap>
                <!-- 旧版播放器，已弃用，改用video-player组件，但目前无法播放，待查 -->
                <!-- <div style="width: 100%; height: 100%; border: 1px solid gray;">
                    <video-player :src="video.videoUrl" :options="playerOptions" :volume="0.6" />
                </div> -->
                <!-- 三连转发 -->
                <div class="video-toolbar-container">
                    <div class="video-toolbar-left">
                        <div class="toolbar-left-item-wrap">
                            <div class="video-toolbar-left-item" :class="{ 'on': userStore.attitudeToVideo.love }"
                                @click="loveOrNot(true, !attitudeToVideo.love)">
                                <i class="iconfont icon-dianzan"></i>
                                <span class="video-toolbar-item-text">{{ handleNum(good) }}</span>
                                <div class="dianzan-gif" :class="isGifShow ? 'gif-show' : 'gif-hide'">
                                    <img src="@/assets/img/dianzan.gif" alt="" v-if="gifDisplay">
                                </div>
                            </div>
                        </div>
                        <div class="toolbar-left-item-wrap">
                            <div class="video-toolbar-left-item" :class="{ 'on': userStore.attitudeToVideo.unlove }"
                                @click="loveOrNot(false, !userStore.attitudeToVideo.unlove)">
                                <i class="iconfont icon-diancai"></i>
                                <span class="video-toolbar-item-text">不喜欢</span>
                            </div>
                        </div>
                        <div class="toolbar-left-item-wrap">
                            <div class="video-toolbar-left-item" :class="{ 'on': userStore.attitudeToVideo.coin > 0 }"
                                @click="noPage">
                                <i class="iconfont icon-toubi"></i>
                                <span class="video-toolbar-item-text">{{ handleNum(coin) }}</span>
                            </div>
                        </div>
                        <div class="toolbar-left-item-wrap">
                            <div class="video-toolbar-left-item" :class="{ 'on': userStore.attitudeToVideo.collect }"
                                @click="openCollectDialog">
                                <i class="iconfont icon-shoucang"></i>
                                <span class="video-toolbar-item-text">{{ handleNum(collect) }}</span>
                            </div>
                        </div>
                        <div class="toolbar-left-item-wrap">
                            <div class="video-toolbar-left-item" @click="noPage">
                                <i class="iconfont icon-zhuanfa"></i>
                                <span class="video-toolbar-item-text">{{ handleNum(share) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="video-toolbar-right">
                        <div class="video-toolbar-right-item">
                            <Popover placement="top" popStyle="padding-bottom: 10px; z-index: 1000;">
                                <template #reference>
                                    <div class="video-tool-more">
                                        <i class="iconfont icon-gengduo"></i>
                                    </div>
                                </template>

                                <template #content>
                                    <div class="video-tool-more-dropdown">
                                        <div class="dropdown-item">
                                            <i class="iconfont icon-jubao" style="margin-right: 5px;"></i>
                                            <span>举报稿件</span>
                                        </div>
                                    </div>
                                </template>
                            </Popover>
                        </div>
                    </div>
                </div>
                <!-- 简介评论区 -->
                <div class="left-container-under-player">
                    <!-- 简介 -->
                    <div class="video-desc-container"
                        :style="(!video.description || video.description === '') ? 'display: none;' : ''">
                        <div class="basic-desc-info" :style="showAllDesc ? 'height: auto;' : 'height: 84px;'">
                            <span class="desc-info-text" v-html="linkify(video.description)"></span>
                        </div>
                        <div class="toggle-btn" v-if="descTooLong">
                            <span class="toggle-btn-text" @click="showAllDesc = !showAllDesc">
                                {{ showAllDesc ? '收起' : '展开更多' }}
                            </span>
                        </div>
                    </div>
                    <!-- 标签 -->
                    <div class="video-tag-container">
                        <div class="tag-container">
                            <a :href="`/v/${category.mcId}`" target="_blank" class="tag-link">{{ category.mcName }}</a>
                        </div>
                        <div class="tag-container">
                            <a :href="`/v/${category.mcId}/${category.scId}`" target="_blank" class="tag-link">
                                {{ category.scName }}</a>
                        </div>
                        <div class="tag-container" v-for="(item, index) in tags" :key="index">
                            <a :href="`/search/video?keyword=${item}`" target="_blank" class="tag-link">{{ item }}</a>
                        </div>
                    </div>
                    <!-- 评论 -->
                    <CommentVue :uid="user.uid" :count="comment"></CommentVue>
                </div>
            </div>
            <div class="right-container">
                <div class="right-container-inner" ref="rightPart">
                    <!-- UP主信息 -->
                    <div class="up-panel-container">
                        <div class="up-info-container">
                            <div class="up-info--left">
                                <div class="up-avatar-wrap">
                                    <Popover popStyle="z-index: 2000; cursor: default; padding-top: 30px;">

                                        <template #reference>
                                            <a :href="`/space/${user.uid}`" target="_blank" class="up-avatar">
                                                <VAvatar :img="user.avatar" :size="48" :auth="user.auth"></VAvatar>
                                            </a>
                                        </template>

                                        <template #content>
                                            <UserCard :user="user"></UserCard>
                                        </template>
                                    </Popover>
                                </div>
                            </div>
                            <div class="up-info--right">
                                <div class="up-info__detail">
                                    <div class="up-detail-top">
                                        <a :href="`/space/${user.uid}`" target="_blank" class="up-name"
                                            :class="user.vip !== 0 ? 'vip-name' : ''">{{ user.nickname }}</a>
                                        <a class="send-msg" @click="createChat">
                                            <i class="iconfont icon-xinfeng"></i>
                                            发消息
                                        </a>
                                    </div>
                                    <div class="up-description" :title="user.description">{{ user.description }}</div>
                                </div>
                                <div class="up-info__btn-panel">
                                    <div class="default-btn follow-btn not-follow" v-if="true" @click="noPage">
                                        <i class="iconfont icon-jia"></i>
                                        关注 {{ handleNum(user.fansCount) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 弹幕组件 -->
                    <DanmuBox :boxHeight="playerSize.height" :authorId="user.uid"
                        @jump="(time) => jumpTimePoint = time">
                    </DanmuBox>
                    <!-- 相关视频列表 -->
                    <div class="recommend-list">
                        <div class="rec-list" v-if="recommendVideos.length > 1">
                            <!-- 视频卡片 -->
                            <div class="video-page-card-small" v-for="(item, index) in recommendVideos" :key="index">
                                <div class="card-box">
                                    <div class="pic-box">
                                        <div class="pic" @click="changeVideo(item.video.vid)">
                                            <img :src="item.video.coverUrl" alt="">
                                            <span class="duration">{{ handleTime(item.video.duration) }}</span>
                                        </div>
                                    </div>
                                    <div class="info">
                                        <p class="title" @click="changeVideo(item.video.vid)">{{ item.video.title }}</p>
                                        <a :href="`/space/${item.user.uid}`" target="_blank" class="upname">
                                            <svg t="1703614018039" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="4221" width="18" height="18">
                                                <path
                                                    d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                                                    p-id="4222"></path>
                                                <path
                                                    d="M419.2 544c0 51.2-3.2 108.8-83.2 108.8S252.8 595.2 252.8 544v-217.6H192v243.2c0 96 51.2 140.8 140.8 140.8 89.6 0 147.2-48 147.2-144v-240h-60.8V544zM710.4 326.4h-156.8V704h60.8v-147.2h96c102.4 0 121.6-67.2 121.6-115.2 0-44.8-19.2-115.2-121.6-115.2z m-3.2 179.2h-92.8V384h92.8c32 0 60.8 12.8 60.8 60.8 0 44.8-32 60.8-60.8 60.8z"
                                                    p-id="4223"></path>
                                            </svg>
                                            <span class="name">{{ item.user.nickname }}</span>
                                        </a>
                                        <div class="playinfo">
                                            <svg t="1703614610134" class="playinfo-play" viewBox="0 0 1024 1024"
                                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4864" width="18"
                                                height="18">
                                                <path
                                                    d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                                                    p-id="4865" fill="#aaaaaa"></path>
                                                <path
                                                    d="M684.8 483.2l-256-112c-22.4-9.6-44.8 6.4-44.8 28.8v224c0 22.4 22.4 38.4 44.8 28.8l256-112c25.6-9.6 25.6-48 0-57.6z"
                                                    p-id="4866"></path>
                                            </svg>
                                            {{ handleNum(item.video.play) }}
                                            <svg t="1703614725224" class="playinfo-dm" viewBox="0 0 1024 1024"
                                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5601"
                                                id="mx_n_1703614725225" width="18" height="18">
                                                <path
                                                    d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"
                                                    p-id="5602"></path>
                                                <path
                                                    d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"
                                                    p-id="5603"></path>
                                            </svg>
                                            {{ handleNum(item.video.danmu) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 收藏框 -->
        <el-dialog v-model="collectVisible" :close-on-click-modal="false" destroy-on-close align-center>
            <AddToFavorite :lastSelected="collectedFids" :vid="video.vid ? video.vid : 0" @collected="updateCollect">
            </AddToFavorite>
        </el-dialog>
    </div>
</template>

<script setup>
import CommentVue from '@/components/comment/CommentVue.vue';
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import Popover from "@/components/popover/Popover.vue";
import PlayerWrap from '@/components/player/PlayerWrapper.vue';
import VAvatar from '@/components/avatar/Avatar.vue';
import UserCard from '@/components/userCard/UserCard.vue';
import HeaderBar from '@/components/headerBar/HeaderBar.vue';
import DanmuBox from '@/components/danmu/DanmuBox.vue';
import AddToFavorite from '@/components/favorite/AddToFavorite.vue';
import { getUserAttitude, goodOrNot } from '@/api/attitude.js';
import { getVideoDetail, getRecommendVideo } from '@/api/video.js';
import { handleTime, handleNum, handleDate, linkify } from '@/utils/utils.js';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { ElMessage } from 'element-plus';
import { getDanmuListForVideo } from '@/api/danmu.js';
import { getUserCollectedFids } from '../../api/favorite';

const route = useRoute();
const router = useRouter();

const userStore = useUserStore();

// 响应式数据
const socket = ref(null);
const playerSize = ref({
    width: 704,
    height: 442,
});
const video = ref({});
const view = ref(0);
const danmu = ref(0);
const good = ref(0);
const coin = ref(0);
const collect = ref(0);
const share = ref(0);
const comment = ref(0);
const population = ref(0);
const user = ref({ uid: 0 });
const category = ref({});
const tags = ref([]);
const showAllDesc = ref(true);
const descTooLong = ref(false);
const jumpTimePoint = ref(-1);
const autonext = ref(false);
const recommendVideos = ref([]);
const vids = ref([]);
const isGifShow = ref(false);
const gifDisplay = ref(false);
const collectVisible = ref(false);
const collectedFids = ref(new Set());
const attitudeToVideo = ref({})
const isMounted = ref(false);
const loveLoading = ref(false);

let playerOptions = ref({
    // height: 200,
    // width: document.documentElement.clientWidth, //播放器宽度
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    autoplay: 'any', // 如果true,浏览器准备好时开始回放。
    muted: false, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    notSupportedMessage: '出问题拉啦啦啦啦啦~（ ゜- ゜）つロ', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controls: true,
    controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
    }
})

// 获取视频详细信息
const getVideoInfo = async () => {
    await getVideoDetail(route.params.vid).then(res => {
        if (res.code == 1) {
            // console.log(JSON.stringify(res));
            video.value = res.data.video;
            user.value = res.data.user;
            category.value = res.data.category;
            view.value = res.data.video.play;
            danmu.value = res.data.video.danmu;
            good.value = res.data.video.good;
            tags.value = res.data.video.tags.split("\r\n").filter(tag => tag.trim() !== "");
            coin.value = res.data.video.coin;
            collect.value = res.data.video.collect;
            share.value = res.data.video.share;
            comment.value = res.data.video.comment;
            isDescTooLong();
            // 如果用户登录了，就获取用户收藏了该视频的收藏夹ID列表
            if(userStore.isLogin) {
                getCollectedFids();
            }
        } else {
            ElMessage.error(res.msg);
        }
    });
}

// 判断简介长度是否过长需要收起
const isDescTooLong = () => {
    nextTick(() => {
        const desc = document.querySelector('.basic-desc-info');
        if (desc.clientHeight > 84) {
            descTooLong.value = true;
            showAllDesc.value = false;
        }
    });
}

onMounted(async () => {
    // 同步自动连播
    if (localStorage.getItem("playerSetting")) {
        let setting = JSON.parse(localStorage.getItem("playerSetting"));
        autonext.value = setting.autonext;
    }
    await initWebsocket();
    // 获取视频详情信息
    await getVideoInfo();
    await getDanmuList();
    await getRecommendVideo().then(res => {
        recommendVideos.value = res.data;
    });

    window.addEventListener('scroll', handleScroll);
    handleScroll();
    window.addEventListener('beforeunload', closeWebSocket);    // beforeunload 事件监听标签页关闭
    setTimeout(() => {
        isMounted.value = true;
    }, 3000);

});

onBeforeUnmount(async () => {
    await closeWebSocket();
    window.removeEventListener('beforeunload', closeWebSocket);
    window.removeEventListener('scroll', handleScroll);
});

const leftPart = ref(null);
const rightPart = ref(null);

// 处理窗口滚动触发的事件
const handleScroll = () => {
    const windowHeight = window.innerHeight;

    if (leftPart.value && leftPart.value.clientHeight <= windowHeight - 64) {
        leftPart.value.style.top = '64px';
    } else if (leftPart.value) {
        leftPart.value.style.top = `-${leftPart.value.clientHeight - windowHeight}px`;
    }

    if (rightPart.value && rightPart.value.clientHeight <= windowHeight - 64) {
        rightPart.value.style.top = '64px';
    } else if (rightPart.value) {
        rightPart.value.style.top = `-${rightPart.value.clientHeight - windowHeight}px`;
    }
};

// 初始化 WebSocket
const initWebsocket = async () => {
    const socketUrl = `ws://localhost:8888/ws/danmu/${route.params.vid}`

    // 如果已经有 WebSocket 连接，先关闭之前的连接
    if (socket.value != null) {
        await socket.value.close()
        socket.value = null
    }

    // 创建新的 WebSocket 实例
    socket.value = new WebSocket(socketUrl)

    // 添加 WebSocket 事件监听器
    socket.value.addEventListener('close', handleWsClose)
    socket.value.addEventListener('message', handleWsMessage)
    socket.value.addEventListener('error', handleWsError)
}

const closeWebSocket = async () => {
    if (socket.value != null) {
        await socket.value.close();
        socket.value = null;
    }
}

// 处理 WebSocket 消息
const handleWsMessage = (e) => {
    if (e.data === '登录已过期') {
        ElMessage.error(e.data)
    } else if (e.data.startsWith('当前观看人数')) {
        const numberPart = e.data.substring(6).trim()
        population.value = parseInt(numberPart, 10)
    } else {
        try {
            const dm = JSON.parse(e.data)
            userStore.danmuList.push(dm)
        } catch (error) {
            console.error('Error parsing Danmu message:', error)
        }
    }
}

// 处理 WebSocket 连接关闭
const handleWsClose = () => {
    // console.log("弹幕websocket信道关闭,请刷新页面重试");
    setTimeout(() => {
        if (!socket.value) {
            initWebsocket()  // 如果两秒后还未重连就手动重连
        }
    }, 2000)
}

// 处理 WebSocket 错误
const handleWsError = (e) => {
    console.log('弹幕websocket报错: ', e)
}

const createChat = () => {
    if (!userStore.user.uid) {
        userStore.openLogin = true;
        nextTick(() => {
            userStore.openLogin = false;
        });
        return;
    }
    openNewPage(`/message/whisper/${user.value.uid}`);
}

// 点赞或取消点赞
const loveOrNot = async (isLove, isSet) => {
    if (loveLoading.value) return;
    // console.log("点赞");
    if (!userStore.user) {
        userStore.openLogin = true;
        // 等待下一个 DOM 更新周期
        setTimeout(() => {
            userStore.openLogin = false;
        });
        return;
    }
    if (!video.value.vid) {
        ElMessage.error("视频不存在");
        return;
    }
    loveLoading.value = true;
    const originalLove = userStore.attitudeToVideo.love;
    goodOrNot(video.value.vid, isLove, isSet).then(res => {
        if (res.code == 1) {
            const atv = {
                love: res.data.love === 1 ? true : false,
                unlove: res.data.unlove === 1 ? true : false,
                coin: res.data.coin,
                collect: res.data.collect === 1 ? true : false
            };
            userStore.updateAttitudeToVideo(atv);
            if (isLove && isSet) {
                good.value = good.value + 1;   // 点赞 点赞数加一
                gifShow();
                setTimeout(() => {
                    gifHide();
                }, 3000);
            } else if (isLove || (!isLove && isSet && originalLove)) {
                good.value = good.value - 1 < 0 ? 0 : good.value - 1;   // 取消点赞或者原来是赞但是点踩了 点赞数减一
            }
            loveLoading.value = false;
        } else {
            loveLoading.value = false;
            return;
        }
    })
}

// 窗口大小变动时更新相关宽高
const updatePlayerSize = (size) => {
    playerSize.value.width = size.width;
    playerSize.value.height = size.height;
}

// 发送弹幕
const sendDanmu = (dm) => {
    console.log("发送弹幕");

    if (!localStorage.getItem('Authorization')) {
        userStore.openLogin = true;
        nextTick(() => {
            userStore.openLogin = false;
        });
        return;
    }
    const dmJson = JSON.stringify({
        Authorization: "Bearer " + localStorage.getItem('Authorization'),
        data: dm
    });
    socket.value.send(dmJson);
}

// 视频播放结束自动连播
const next = () => {
    if (recommendVideos.value[0]) {
        changeVideo(recommendVideos.value[0].video.vid);
    }
}

// 打开新标签页
const openNewPage = (route) => {
    window.open(router.resolve(route).href, '_blank');
}

function gifShow() {
    gifDisplay.value = true;
    isGifShow.value = true;
}

function gifHide() {
    isGifShow.value = false;
    setTimeout(() => {
        gifDisplay.value = false;
    }, 300);
}

// 切换视频
async function changeVideo(vid) {
    await router.push(`/video/${vid}`);
    await getVideoInfo()
    await getDanmuList();
    await getRecommendVideo().then(res => {
        recommendVideos.value = res.data;
    });
}


// 获取弹幕列表
const getDanmuList = async () => {
    // console.log("获取弹幕");
    const res = await getDanmuListForVideo(route.params.vid);
    // console.log("弹幕列表：" + JSON.stringify(res.data));
    if (res.data == null || res.data.length === 0) {
        userStore.updateDanmuList([]);
    } else if (res.data.length > 0) {
        userStore.updateDanmuList(res.data);
    }
}

// 获取收藏了该视频的收藏夹ID列表
const getCollectedFids = async () => {
    await getUserCollectedFids(video.value.vid).then(res=>{
        if(res.code == 1) {
            collectedFids.value = new Set(res.data);
            console.log("该用户收藏了该视频的收藏夹ID集合: ", JSON.stringify(res.data));
            // userStore.attitudeToVideo.
        }
    });
}

// 打开收藏对话框
const openCollectDialog = () => {
    if (!userStore.user) {
        userStore.openLogin = true;
        // 等待下一个 DOM 更新周期
        setTimeout(() => {
            userStore.openLogin = false;
        });
        return;
    }
    if (!video.value.vid) {
        ElMessage.error("视频不存在");
        return;
    }
    collectVisible.value = true;
};

// 更新收藏
const updateCollect = (info) => {
    collectedFids.value = info.fids;
    collect.value += info.num;
    collectVisible.value = false;
}

const noPage = () => {
    ElMessage.warning("该功能暂未开放");
}

</script>

<style scoped>
.video-container {
    width: auto;
    padding: 64px 10px 0px;
    max-width: 2540px;
    min-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    box-sizing: content-box;
    position: relative;
}

.left-container {
    position: sticky;
    height: fit-content;
}

.video-info-container {
    height: 104px;
    box-sizing: border-box;
    padding-top: 22px;
}

.video-title {
    font-size: 20px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    color: var(--text1);
    line-height: 28px;
    margin-bottom: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video-info-detail {
    font-size: 13px;
    color: var(--text3);
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 18px;
    position: relative;
    overflow: hidden;
}

.video-info-detail-list {
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.video-info-detail-list .item {
    flex-shrink: 0;
    margin-right: 12px;
    overflow: hidden;
}

.video-info-detail-list .item:last-child {
    margin-right: 0;
}

.view,
.danmu,
.copyright {
    display: inline-flex;
    align-items: center;
}

.icon-bofangshu .icon-danmushu {
    font-size: 18px;
}

.honor {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    height: 24px;
    border-radius: 2px;
    padding: 0px 6px;
}

.honor.honor-rank {
    color: var(--brand_pink);
    background-color: rgba(255, 102, 153, 0.1);
}

.honor .icon-paihang {
    font-size: 14px;
    margin: 0 5px 0 3px;
}

.honor .icon-youjiantou {
    font-size: 14px;
}

.date {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 24px;
    font-size: 13px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.icon-jinzhi {
    font-size: 12px;
    margin-right: 4px;
    color: var(--stress_red);
}

.video-toolbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 12px;
    line-height: 28px;
    border-bottom: 1px solid var(--line_regular);
}

.video-toolbar-left {
    position: relative;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}

.toolbar-left-item-wrap {
    position: relative;
    margin-right: 8px;
}

.video-toolbar-left-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 92px;
    white-space: nowrap;
    transition: all .3s;
    font-size: 13px;
    color: var(--text2);
    font-weight: 500;
    cursor: pointer;
}

.video-toolbar-left-item.on,
.video-toolbar-left-item:hover {
    color: var(--brand_pink);
}

.video-toolbar-left-item .iconfont {
    margin-right: 8px;
    font-size: 26px;
}

.video-toolbar-left-item .icon-diancai {
    transform: translateY(2px);
}

.video-toolbar-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
}

.dianzan-gif {
    position: absolute;
    top: -50px;
    left: -10px;
    height: 40px;

}

.dianzan-gif img {
    height: 100%;
}

.gif-hide {
    animation: disappear 0.2s ease-out forwards;
    transform-origin: bottom;
}

.gif-show {
    animation: appear 0.2s ease-out forwards;
    transform-origin: bottom;
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes disappear {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(5px) scale(0);
    }
}

.video-toolbar-right {
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}

.video-toolbar-right-item {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    color: var(--text2);
    transition: all .3s;
    cursor: pointer;
}

.video-toolbar-right-item:hover {
    color: var(--brand_pink);
}

.video-tool-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
}

.icon-gengduo {
    font-size: 18px;
}

.video-tool-more-dropdown {
    padding: 12px 0px;
    cursor: auto;
}

.dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    width: 120px;
    padding: 0 20px;
    color: var(--text1);
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: var(--Ga1);
}

.icon-jubao1 {
    margin-right: 10px;
}

.video-desc-container {
    margin: 16px 0;
}

.basic-desc-info {
    white-space: pre-line;
    letter-spacing: 0;
    color: var(--text1);
    font-size: 15px;
    line-height: 24px;
    overflow: hidden;
}

.toggle-btn {
    margin-top: 10px;
    font-size: 13px;
    line-height: 18px;
}

.toggle-btn-text {
    cursor: pointer;
    color: var(--text2);
}

.toggle-btn-text:hover {
    color: var(--brand_pink);
}

.video-tag-container {
    padding-bottom: 6px;
    margin: 16px 0 20px 0;
    border-bottom: 1px solid var(--line_regular);
    display: flex;
    flex-wrap: wrap;
}

.tag-container {
    margin: 0px 12px 8px 0;
}

.tag-link {
    color: var(--text2);
    background: var(--graph_bg_regular);
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    font-size: 13px;
    padding: 0 12px;
    box-sizing: border-box;
    transition: all .3s;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.right-container {
    width: 350px;
    flex: none;
    margin-left: 30px;
    position: relative;
    pointer-events: none;
}

.right-container-inner {
    padding-bottom: 250px;
    position: sticky;
}

.right-container-inner * {
    pointer-events: all;
}

.up-info-container {
    box-sizing: border-box;
    height: 104px;
    display: flex;
    align-items: center;
}

.up-avatar-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.up-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--graph_weak);
}

.up-info--right {
    margin-left: 12px;
    flex: 1;
}

.up-info__detail {
    margin-bottom: 5px;
}

.up-detail-top {
    display: flex;
    align-items: center;
}

.up-name {
    font-size: 15px;
    color: var(--text1);
    font-weight: 500;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 12px;
    max-width: calc(100% - 12px - 56px);
}

.send-msg {
    color: var(--text2);
    font-size: 13px;
    transition: color 0.3s;
    flex-shrink: 0;
    cursor: pointer;
}

.send-msg:hover {
    color: var(--brand_pink);
}

.up-description {
    margin-top: 2px;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-info__btn-panel {
    clear: both;
    display: flex;
    margin-top: 5px;
    white-space: nowrap;
}

.up-info__btn-panel .default-btn {
    box-sizing: border-box;
    padding: 0;
    line-height: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--graph_weak);
    position: relative;
    transition: 0.3s all;
}

.follow-btn {
    width: 200px;
}

.follow-btn.following {
    color: var(--text3);
    background-color: var(--graph_bg_thick);
}

.follow-btn.following:hover {
    background-color: var(--graph_bg_regular);
}

.follow-btn.not-follow {
    background: var(--brand_pink);
    color: var(--text_white);
}

.follow-btn.not-follow:hover {
    background: var(--Pi4);
}

.follow-btn .iconfont {
    font-size: 14px;
    margin-right: 2px;
}

.following-dropdown {
    padding: 8px 0px;
}

.following-dropdown .dropdown-item:hover {
    color: var(--brand_pink);
}

.recommend-list {
    margin-top: 18px;
}

.rec-title {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    color: var(--text1);
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    line-height: 20px;
}

.next-button {
    color: var(--text3);
    font-size: 13px;
    line-height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.next-button .txt {
    margin-right: 4px;
    vertical-align: middle;
}

.next-button .switch-button {
    margin: 0;
    display: inline-block;
    position: relative;
    width: 30px;
    height: 20px;
    outline: none;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
    vertical-align: middle;
    background: var(--text3);
    border: 1px solid var(--text3);
}

.next-button .switch-button.on {
    background: var(--brand_pink);
    border: 1px solid var(--brand_pink);
}

.next-button .switch-button:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    background-color: #fff;
    transition: all .2s;
}

.next-button .switch-button.on:after {
    left: 11px;
}

.split-line {
    width: 100%;
    height: 1px;
    background: var(--line_regular);
}

.rec-list {
    margin-top: 18px;
}

.video-page-card-small {
    margin-bottom: 12px;
}

.video-page-card-small a {
    color: #222;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

.video-page-card-small .card-box {
    display: flex;
}

.video-page-card-small .card-box .pic-box {
    position: relative;
    width: 141px;
    height: 80px;
    border-radius: 6px;
    background: var(--graph_weak);
    flex: 0 0 auto;
}

.video-page-card-small .card-box .pic-box .pic {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-page-card-small .card-box .pic-box .pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: crisp-edges;
}

.video-page-card-small .card-box .pic-box .pic .duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    color: #fff;
    height: 20px;
    line-height: 20px;
    transition: opacity 0.3s;
    z-index: 5;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    padding: 0 4px;
}

.video-page-card-small .card-box .info {
    margin-left: 10px;
    flex: 1;
    font-size: 13px;
    line-height: 15px;
}

.video-page-card-small .card-box .info .title {
    cursor: pointer;
    color: var(--text1);
    display: block;
    font-size: 15px;
    line-height: 19px;
    transition: color 0.3s;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-font-smoothing: antialiased;
}

.video-page-card-small .card-box .info .title:hover {
    color: var(--brand_pink);
}

.video-page-card-small .card-box .info .upname {
    cursor: pointer;
    margin: 2px 0;
    height: 20px;
    color: var(--text3);
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.video-page-card-small .card-box .info .upname:hover {
    color: var(--brand_pink);
}

.video-page-card-small .card-box .info .upname svg {
    margin-right: 4px;
    fill: var(--text3);
    transition: fill 0.3s;
}

.video-page-card-small .card-box .info .upname:hover svg {
    fill: var(--brand_pink);
}

.video-page-card-small .card-box .info .upname .name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 1;
}

.video-page-card-small .card-box .info .playinfo {
    color: var(--text3);
    fill: var(--text3);
    display: inline-flex;
    align-items: center;
}

.video-page-card-small .card-box .info .playinfo svg {
    margin-right: 4px;
}

.playinfo-dm {
    margin-left: 8px;
}

@media (min-width: 1681px) {
    .video-info-container {
        height: 108px;
    }

    .up-info-container {
        height: 108px;
    }

    .video-info-container .video-title {
        font-size: 22px;
        line-height: 34px;
    }

    .right-container {
        width: 411px;
    }

    .up-name {
        font-size: 16px;
        max-width: calc(100% - 12px - 60px);
    }

    .send-msg {
        font-size: 14px;
    }

    .up-description {
        font-size: 14px;
    }

    .follow-btn {
        width: 230px;
    }
}
</style>